<template>
  <view class="tag-form">
    <view class="form-content">
      <text class="form-title">{{ tag ? '编辑标签' : '新建标签' }}</text>
      
      <InputField
        v-model="formData.name"
        label="标签名称"
        required
        placeholder="请输入标签名称"
      />

      <view class="actions">
        <CustomButton 
          text="取消" 
          @click="handleCancel"
          backgroundColor="#909399"
        />
        <CustomButton 
          text="确定" 
          @click="handleSubmit"
          backgroundColor="#409eff"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import InputField from '@/components/InputField.vue'
import CustomButton from '@/components/CustomButton.vue'

const props = defineProps({
  tag: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['submit', 'cancel'])

const formData = ref({
  name: props.tag?.name || ''
})

const handleSubmit = () => {
  emit('submit', { ...formData.value })
}

const handleCancel = () => {
  emit('cancel')
}
</script>

<style lang="scss">
.tag-form {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

  .form-content {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    width: 600rpx;

    .form-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 32rpx;
      display: block;
    }

    .actions {
      display: flex;
      justify-content: flex-end;
      gap: 16rpx;
      margin-top: 32rpx;
    }
  }
}
</style>